<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 user-scalable=no" />
		<!-- 删除默认的苹果工具栏和菜单栏 ： 即启用 WebApp 全屏模式  -->
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<!-- 在web app应用下状态条（屏幕顶部条）的颜色；默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。 -->
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<!-- 忽略数字自动识别为电话号码 ,忽略识别邮箱 -->
		<meta name="format-detection" content="telephone=no, email=no" />
		<!-- 启用360浏览器的极速模式(webkit) -->
		<meta name="renderer" content="webkit">
		<!-- 避免IE使用兼容模式 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- uc强制竖屏 -->
		<meta name="screen-orientation" content="portrait" />
		<!-- QQ强制竖屏 -->
		<meta name="x5-orientation" content="portrait">
		<!-- UC强制全屏 -->
		<meta name="full-screen" content="true" />
		<!-- QQ强制全屏 -->
		<meta name="x5-fullscreen" content="true" />
		<!-- 360强制全屏 -->
		<meta name="360-fullscreen" content="true" />
		<link rel="stylesheet" href="css/base.css" />		
		<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
		<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js">
		<script type="text/javascript" src="js/zepto.js" ></script>
		<script src="js/xsdate.js"></script>
		<style>
		.body{
			width: 100%;
		}
			.tab_sech {
				width: 100%;
				height: 50px;
				line-height: 50px;
				/*background: #CCCCCC;*/
				text-align: center;
				margin-bottom: 18px;
			}
			
			.tab_sech input {
				width: 90%;
				height: 40px;
				border: none;
				border: 1px solid #CCCCCC;
				outline: none;
				border-radius: 4px;
				padding-left: 32px;
				box-sizing: border-box;
				background: url(img/sech.png) no-repeat 10px 14px;
				background-size: 16px;
				margin-top:14px;
				font-size: 18px;
			}
			
			.fclass_1{
				width: 90%;
				margin: 0px auto;
				/*border: 1px solid red;*/
			}
			
			.fclass_1>div{				
				width:48%;
				height:100% ;						
				position: relative;				
				margin-bottom: 14px;							
			}			
			
			.fclass_1>div>span:nth-of-type(1){
				display: block;
				width: 100%;							
				background: rgba(0,0,0,0.3);							
				border-radius: 20px;
				position: absolute;
				left: 0px;
				top: 0px;													
				
			}
			
			.fclass_1>div>span:nth-of-type(2){				
				display: block;	
				/*border: 1px solid red;	*/
				width: 100%;			
				height: 100%;												
			  position: absolute;				
				left: 0px;
				top: 0px;		   
				padding-top: 26%;
			    color: white;
				font-size: 20px;													
			    text-align: center;	
				
			}
			
			.fclass_1>div>img{
				display: block;
				width: 100%;				
				border-radius: 20px;
			}
			
			.clearight{
				clear: right;
			}
			
			/*底部样式*/
			.bottomBar{			
			width: 100%;
			height: 60px;
			padding-top: 10px;
			position: fixed;
			left: 0px;
			bottom: 0px;
			background: #fff;
			border-top: 1px solid #ccc;
			box-shadow:2px 2px 3px #cfcfcf;
			-moz-box-shadow:2px 2px 3px #cfcfcf;
			-webkit-box-shadow:2px 2px 3px #cfcfcf;
		}
		.bottomBar ul li{
			float: left;
			width: 25%;
			text-align: center;
			font-size: 14px;
		}
		.bottomBar ul li a{
			color: #666;
		}
		.bottomBar ul li a:hover{
			text-decoration: none;
		}
		.bottomBar li span{
			display: inline-block;
			width: 30px;
			height: 30px;	
					
		}
	
		.bottomBar li:nth-of-type(1) span{
			background: url(img/faxian2.png) no-repeat;		
			background-size: contain;	
		}
		.bottomBar li:nth-of-type(2) span{
			background: url(img/hov_fenglei.png) no-repeat  ;	
			background-size: contain;		
		}
		.bottomBar li:nth-of-type(3) span{
			background: url(img/sech.png) no-repeat;		
			background-size: contain;	
		}
		.bottomBar li:nth-of-type(4) span{
			background: url(img/wode.png) no-repeat;	
			background-size: contain;		
		}
		.p_color{
			color: #39C764;
		}
		</style>
	</head>

	<body>
		<div class="tab_sech">
			<input type="text" id="sech_bord" placeholder="书名、作者、关键字" />
		</div>

		<div class="fclass_1 clearfix class_box">
			
			<div class="fl img_txt">
				<img src="img/ds.jpg" />
				<span></span>
				<span>现代都市</span>
			</div>

			<div class="fr img_txt clearight">
				<img src="img/yq.jpg" />
				<span></span>
				<span>言情小说</span>
			</div>	
			
			<div class="fl img_txt">
		      <img src="img/wx.jpg" />
				<span></span>
				<span>武侠小说</span>
			</div>
			
			<div class="fr img_txt clearight">
				<img src="img/xh.jpg" />
				<span></span>
				<span>玄幻小说</span>
			</div>
			
			<div class="fl img_txt">
				<img src="img/xy.jpg" />
				<span></span>
				<span>悬疑探险</span>
			</div>
			
			<div class="fr img_txt clearight">
				<img src="img/js.jpg" />
				<span></span>
				<span>军事历史</span>
			</div>
			
			
		</div>
		
		
		<!--底部导航-->
		<div class="bottomBar">
			<ul>
				<li><a href="#" onclick="location.href = 'index.html';return false;"><span class="clickStyles"></span><p>发现</p></a></li>
				<li><a href="#" onclick="location.href = 'class.html';return false;"><span></span><p class="p_color">分类</p></a></li>
				<li><a href="#" onclick="location.href = 'seach.html';return false;"><span></span><p>搜索</p></a></li>
				<li><a href="#" onclick="location.href = 'My.html';return false;"><span></span><p>我的</p></a></li>
			</ul>
		</div>
		
		<script>
		
			$(start)
			function start () {
				//点击各个分类；
				$(".class_box>div").on("tap",function() {				
					var index=$(this).index();
					location="classify"+index+".html"		
				})
				
				$("#sech_bord").on("focus",function() {
					location="seach.html"
					
				})
				
			}
		</script>
	</body>

</html>